<template>
<!-- 查询节点导航栏 -->
  <el-form label-width="70px">
  <!-- 点击的节点信息 -->
  <el-form-item label="id">
    <el-input v-model="menuform.id"></el-input>
  </el-form-item>
  <el-form-item label="级别">
    <el-input v-model="menuform.label"></el-input>
  </el-form-item>
  <el-form-item label="是否子级">
    <el-switch v-model="menuform.ischildren"></el-switch>
  </el-form-item>
  <!-- 下属一级-子级的信息 -->
  <template class="childernmenu" v-if="menuform.ischildren">
  <div v-for="itemchildren in menuform.children" :key="itemchildren.id">
  <el-form-item label="子级id">
    <el-input v-model="itemchildren.id"></el-input>
  </el-form-item>
  <el-form-item label="级别">
    <el-input v-model="itemchildren.label"></el-input>
  </el-form-item>
  </div>
  </template>

 </el-form>

</template>

<script>
export default {
  // 需要外面给传进数据 转成这个格式
  name: 'Menu',
  data () {
    return {
      // 展示点击节点的数据
      menuform: {
        id: '1', // 点击节点的id
        label: '一级', // 点击节点的内容
        ischildren: true, // 判断有没有子级 有就显示下属一级的子级的信息 没有就不显是
        children: [{
          id: '1-1', // 子级节点的id
          label: '二级'// 子级节点的内容
        },
        {
          id: '1-2', // 子级节点的id
          label: '二级'// 子级节点的内容
        }]
      }
    }
  }
}
// 数据格式
// {id:'1',
// label:'1',
// childern:[
// {id:'1-1',label:'2'}
// {id:'1-2',label:'3'} ]
// }
</script>

<style>

</style>
